<template>
    <div class="px-8 py-4">
        <el-tabs v-model="activeName">
            <el-tab-pane label="导航" name="1" />
            <el-tab-pane label="文章" name="2" />
            <el-tab-pane label="预览" name="3" />
        </el-tabs>
        <navigation v-if="activeName === '1'" />
        <articleList v-if="activeName === '2'" />
    </div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import navigation from "./components/navigation.vue";
import articleList from "./components/article-list.vue";
import { preview } from "@/utils/preview";

const activeName = ref("1");

watch(
    () => activeName.value,
    (newValue, lastValue) => {
        if (newValue === "3") {
            preview("/#/yzll_new");
            nextTick(() => {
                activeName.value = lastValue;
            });
        }
    }
);

</script>

<style scoped></style>
